<template>
	<!-- 管理中心首页 -->
    <div class="adminindex">
      <tz-breadcrumb :title='["管理中心", "欢迎页"]' :pathArr='[{"name": "管理中心"},{"name": "欢迎页", "url": "/adminindex"}]'></tz-breadcrumb>
  <div style="margin: 20px;"></div>
  <div class="icon-list">
    <el-row :gutter="10">
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <el-card class="box-card">
          <el-button type="primary"><i class="el-icon-tickets"></i></el-button>
        </el-card>
      </el-col>

      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <el-card class="box-card">
            <el-button type="success"><i class="el-icon-document"></i></el-button>
        </el-card>
      </el-col>

      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
          <el-card class="box-card">
            <el-button type="info"><i class="el-icon-news"></i></el-button>
        </el-card>
      </el-col>

      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
          <el-card class="box-card">
            <el-button type="warning"><i class="el-icon-view"></i></el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
    <div class="top-list" style="margin-top: 15px;">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight:bold;">一周内总交易额TOP10</span>
              <el-button style="float: right; padding: 3px 0" type="text"></el-button>
            </div>
          <el-table  style="width: 100%">
            <el-table-column prop="date" label="排名">
            </el-table-column>
            <el-table-column prop="name" label="商户">
            </el-table-column>
            <el-table-column prop="name" label="总交易额">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight:bold;">一周内总预授权订单数TOP10</span>
              <el-button style="float: right; padding: 3px 0" type="text"></el-button>
            </div>
          <el-table  style="width: 100%">
            <el-table-column prop="date" label="排名">
            </el-table-column>
            <el-table-column prop="name" label="商户">
            </el-table-column>
            <el-table-column prop="name" label="总交易额">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight:bold;">一周内总支付订单数TOP10</span>
              <el-button style="float: right; padding: 3px 0" type="text"></el-button>
            </div>
          <el-table  style="width: 100%">
            <el-table-column prop="date" label="排名">
            </el-table-column>
            <el-table-column prop="name" label="商户">
            </el-table-column>
            <el-table-column prop="name" label="总交易额">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script>
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  components: {
    'tz-breadcrumb': tzBreadcrumb
  }
};
</script>

<style lang="stylus" scoped>
.form {
  padding: 2rem;
  padding-right: 200px;
  margin-top: 15px;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 1px 1px #999;

  .form-item {
    display: inline-block;
    margin-right: 35px;

    label {
      font-size: 14px;
      color: #333;
      width: 70px;
      display: inline-block;
    }

    .form-input, .form-select {
      width: 200px;
    }
  }

  .line {
    height: 15px;
  }
}

.server-item {
  width: 20px;
  height: 20px;
  margin: 5px;
}
.icon-list i{
  font-size:40px;
  
}
</style>
